:root {
--InputGroup-rhythm: 1.5rem;
--InputGroup-input-color: #20718A;
--InputGroup-addon-color: color(#20718A tint(30%));
--InputGroup-border-color: color(#20718A tint(60%));
--InputGroup-border--focus-color: color(#20718A tint(30%));
--InputGroup-transition: 0.2s cubic-bezier(.26, .47, .36, .94);
}

/* Need to stick to this naming convention (against suitcss) so that it does
not conflict with the other frontend code
 */

.EditorInputGroup {
  position: relative;
  display: table;
  border-collapse: separate;
}

.EditorInputGroup-input,
.EditorInputGroup-addon,
.EditorInputGroup-button {
  display: table-cell;
  transition: var(--InputGroup-transition);
}

.EditorInputGroup-input,
.EditorInputGroup-addon {
  background-color: transparent;
  padding: 0 calc(var(--InputGroup-rhythm) * .25);
}

.EditorInputGroup-input {
  border: none;
  width: 100%;
  color: var(--InputGroup-input-color);
}

.EditorInputGroup-addon {
  color: var(--InputGroup-addon-color);
  text-align: center;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.EditorInputGroup-addon:before {
  content: ' ';
}

.EditorInputGroup.is-focused .EditorInputGroup-input,
.EditorInputGroup.is-focused .EditorInputGroup-addon {
  background-color: #fff;
}

.EditorInputGroup--bordered .EditorInputGroup-input,
.EditorInputGroup--bordered .EditorInputGroup-addon,
.EditorInputGroup--outlined .EditorInputGroup-input,
.EditorInputGroup--outlined .EditorInputGroup-addon {
  border-top: 1px solid var(--InputGroup-border-color);
  border-bottom: 1px solid var(--InputGroup-border-color);
}

.EditorInputGroup--bordered .EditorInputGroup-input {
  border-left: 1px solid var(--InputGroup-border-color);
  border-right: 1px solid var(--InputGroup-border-color);
}

.EditorInputGroup--outlined .EditorInputGroup-input:first-child,
.EditorInputGroup--outlined .EditorInputGroup-addon:first-child {
  border-left: 1px solid var(--InputGroup-border-color);
}

.EditorInputGroup--outlined .EditorInputGroup-input:last-child,
.EditorInputGroup--outlined .EditorInputGroup-addon:last-child {
  border-right: 1px solid var(--InputGroup-border-color);
}

.EditorInputGroup--bordered.is-focused .EditorInputGroup-input,
.EditorInputGroup--bordered.is-focused .EditorInputGroup-addon,
.EditorInputGroup--outlined.is-focused .EditorInputGroup-input,
.EditorInputGroup--outlined.is-focused .EditorInputGroup-addon {
  border-color: var(--InputGroup-border--focus-color);
}

.EditorInputGroup--rounded .EditorInputGroup-input:first-child,
.EditorInputGroup--rounded .EditorInputGroup-addon:first-child {
  border-bottom-left-radius: calc(var(--InputGroup-rhythm) * 1);
  border-top-left-radius: calc(var(--InputGroup-rhythm) * 1);
  padding-left: calc(var(--InputGroup-rhythm) * .375);
}

.EditorInputGroup--rounded .EditorInputGroup-input:last-child,
.EditorInputGroup--rounded .EditorInputGroup-addon:last-child {
  border-bottom-right-radius: calc(var(--InputGroup-rhythm) * 1);
  border-top-right-radius: calc(var(--InputGroup-rhythm) * 1);
  padding-right: calc(var(--InputGroup-rhythm) * .375);
}
